<template>
    <div>
        <van-nav-bar title="评论" right-text=""/>
        <div class="mix">
            <h3>96%好评</h3>
            <div class="box">
                <van-row gutter="20" class="up" >
                    <van-col span="6"
                             :class="isActive == 0 ?'addClass':'' "
                             @click='onclick0' class="class"
                    >全部({{allArr.length}})</van-col>
                    <van-col span="6"
                             :index="1"
                             :class="isActive == 1?'addClass':'' "
                             @click='onclick1' class="class"
                    >好评({{good.length}})</van-col>
                    <van-col span="6"
                             :index="2"
                             :class="isActive == 2 ?'addClass':'' "
                             @click='onclick2' class="class"
                    >中评({{milin.length}})</van-col>
                    <van-col span="6"
                             :index="3"
                             :class="isActive == 3 ?'addClass':'' "
                             @click='onclick3' class="class"
                    >差评({{bad.length}})</van-col>
                </van-row>
            </div>



            <div class="user" v-for="item in commentArr" v-if="item.commentStatus==1" style="border-bottom: 1px solid #F2F2F2" :key="item.commentId">
                <van-col span="2" class="head">
                    <van-image round width="2.5rem" height="2.5rem" :src="'/tu/'+item.userI"/>
                </van-col>
                <van-col class="mess">
                    <van-row span="12">{{item.userName}}&nbsp;&nbsp;<van-icon name="gem-o"/></van-row>
                    <van-row span="12">{{item.commentCreateTime}} &nbsp;&nbsp;{{item.goodsName}}</van-row>
                </van-col>
                <van-col style="width: 100%">
                    {{item.commentContent}}
                </van-col>
                <van-col>
                    <template  v-for="v in item.imgList">
                        <van-col span="8" class="messImg">
                            <van-image
                                    width="6rem"
                                    height="6rem"
                                    fit="cover"
                                    :src="v"
                            />
                        </van-col>
                    </template>
                </van-col>
                <van-row gutter="20" class="zanList">
                    <van-col class="look">浏览156次</van-col>
                    <van-col>
                        <div class="zan" @click.prevent="dianZan(item.commentId,item.commentThumbUp)">
                            <van-icon name="good-job-o"/>{{item.commentThumbUp}}
                        </div>
                    </van-col>
                </van-row>
            </div>




        </div>
    </div>
</template>

<script>
    export default {
        name: "comment",
        methods:{
            onclick0(index){
                // console.log("你好")
                // console.log(index)
                //将点击的元素的索引赋值给变量
                this.commentArr=this.allArr
                this.isActive = 0
            },
            onclick1(index){
                // console.log("你好")
                // console.log(index)
                //将点击的元素的索引赋值给变量
                this.commentArr=this.good
                this.isActive = 1
            },
            onclick2(index){
                // console.log("你好")
                // console.log(index)
                //将点击的元素的索引赋值给变量
                this.commentArr=this.milin
                this.isActive = 2
            },
            onclick3(index){
                // console.log("你好")
                // console.log(index)
                //将点击的元素的索引赋值给变量
                this.commentArr=this.bad
                this.isActive = 3
            },

            dianZan(commentId,commentThumbUp){
                this.$axios.post('/api/marketComment/thumpUpComment?commentId='+commentId+'&commentThumbUp='+(commentThumbUp+1)).then(res=>{
                    this.isDianZan=1
                    console.log(res.data)
                })
                this.$axios.post('/api/marketComment/showByGoods?goodsId=1').then(res=> {
                    this.commentArr=res.data.data
                    this.allArr=[...res.data.data]
                    this.good=[]
                    this.milin=[]
                    this.bad=[]
                    this.commentArr.forEach(item=>{
                        if (item.commentScore<=5 && item.commentScore>=4){
                            this.good.push(item)
                        }else if(item.commentScore<=3 && item.commentScore>=2){
                            this.milin.push(item)
                        }else {
                            this.bad.push(item)
                        }

                    })
                    // console.log(this.commentArr)
                })
            }
        },

        data(){
            return{
                isActive: false,
                pMenu:[
                    '全部','好评','中评','差评','包装严实'
                ],
                commentArr:'',
                isDianZan:0,
                dianzan:[],
                good:[],
                milin:[],
                bad:[],
                allArr:[]
            }
        },
        created() {
            this.$axios.post('/api/marketComment/showByGoods?goodsId=1').then(res=> {
                this.commentArr=res.data.data
                this.allArr=[...res.data.data]
                this.commentArr.forEach(item=>{
                    if (item.commentScore<=5 && item.commentScore>=4){
                        this.good.push(item)
                    }else if(item.commentScore<=3 && item.commentScore>=2){
                        this.milin.push(item)
                    }else {
                        this.bad.push(item)
                    }

                })
                // console.log(this.commentArr)
            })
        }
    }
</script>

<style scoped>
    .mix{
        width: 360px;
        margin: auto;
    }
    h3{
        margin-top: 5px;
        margin-bottom: 10px;
        /*margin-left: 8px;*/
    }
    .box{
        margin-top: 6px;
    }
    .down{
        margin-top: 16px;
    }
    .up{
        font-size: 14px;
    }
    .active{
        color: red;
    }


    .class{
        width: 110px;
        height: 40px;
        line-height: 40px;
        background-color:papayawhip;
        text-align: center;
        margin-right: 6px;
        margin-bottom: 6px;
    }
    .addClass{
        width: 110px;
        height: 40px;
        line-height: 40px;
        background-color:#FF6633;
        text-align: center;
        margin-right: 6px;
        color: white;
    }



    .user{
        margin: 10px;
    }
    .head{
        margin: 10px;
    }

    .mess{
        margin-left: 8px;
    }
    .van-icon{
        color: palevioletred;
        margin:8px;
    }
    .mess>.van-row:last-of-type{
        color: grey;
        font-size: 14px;
    }
    .messImg>.van-image{
        border-radius: 30px;
        margin:10px  14px 0 0;
    }
    .zanList{
        color: grey;
        /*display: flex;*/
        /*justify-content: space-between;*/

    }
    .zan>.van-icon{
        font-size: 22px;
        /*margin-right: 0;*/
        /*text-align: right;*/
        color: grey;
        text-align: center;
        margin-left: 172px;
    }
    .look{
        margin-top: 8px;
    }

</style>